<template>
  <div>
    <h3>一、布局</h3>
    <el-row :gutter="20" type="flex">
      <el-col :span="2" :offset="6">
        <div class="grid-content bg-purple">
          23123123
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light">
          12321321321
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">

          21321321
        </div>
      </el-col>
    </el-row>

    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>

    <el-button type="primary"> <i class="el-icon-edit"></i>搜索</el-button>

    <h3>一、布局容器</h3>

    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  data () {

  }
}
</script>


<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>